import styled from 'styled-components'
import Icon from '@/components/Icon'
export const ItemStatusWrap = styled.div`
	display: flex;
	align-items: center;
	height: 30px;
	box-sizing: border-box;
	span {
		cursor: default;
		margin: 0 2px;
	}
	.icon-status-more {
		cursor: pointer;
	}
`
export const StatusDropDownWrap = styled.div`
	height: 30px;
	background: #ffffff;
	border: 1px solid #b3bbc3;
	display: flex;
	align-items: center;
	font-size: 12px;
	border-radius: 6px;
	span {
		cursor: default;
		margin: 0 5px;
	}
`
interface IconStatusProps {
	isOn: boolean
}
/**
 * 录像
 */
export const IconStatusVmp = styled(Icon)<IconStatusProps>`
	width: 20px;
	height: 20px;
	background-position: ${(props) => (props.isOn ? `-100px -2004px` : `-80px -2004px`)};
`
/**
 * 混音
 */
export const IconStatusMix = styled(Icon)<IconStatusProps>`
	width: 20px;
	height: 20px;
	background-position: ${(props) => (props.isOn ? `-20px -2004px` : `0 -2004px`)};
`
/**
 * 轮询
 */
export const IconStatusPoll = styled(Icon)<IconStatusProps & { active: boolean }>`
	width: 20px;
	height: 20px;
	background-position: ${(props) =>
		props.isOn ? (props.active ? `-240px -2024px` : `-260px -2004px`) : `-240px -2004px`};
`
/**
 * dcs
 */
export const IconStatusDcs = styled(Icon)<IconStatusProps>`
	width: 20px;
	height: 20px;
	background-position: ${(props) => (props.isOn ? `-20px -2024px` : `0 -2024px`)};
`
/**
 * 选看
 */
export const IconStatusSelect = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -500px -2004px;
`
/**
 * 电视墙
 */
export const IconStatusTVWall = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -180px -2004px;
`
/**
 * 上传
 */
export const IconStatusUpMt = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -580px -2004px;
`
/**
 * 录播
 */
export const IconStatusRec = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -420px -2004px;
`
/**
 * 双流
 */
export const IconStatusDoubleFlow = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -780px -2004px;
`
/**
 * 离线
 */
export const IconStatusOffline = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -640px -2004px;
`
/**
 * 更多
 */
export const IconStatusMore = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -320px -2004px;
	&:hover {
		background-position: -340px -2004px;
	}
`
/**
 * 视频源
 */
export const IconStatusVideoSrc = styled(Icon)`
	width: 20px;
	height: 20px;
	background-position: -260px -2024px;
`
